<!-- 代表履职 -->
<template>
  <div class="content">
    <Title isSelect="yes" @dialogFn="dialogFn"> 代表履职 </Title>
    <div class="number">
      <div class="number_item">
        <img src="@/assets/images/left/Group 5932.svg" alt="" srcset="">
        <div class="text">
          <span>代表履职人数</span>
          <p>674</p>
        </div>
      </div>
      <div class="number_item">
        <img src="@/assets/images/left/Group 5933.svg" alt="" srcset="">
        <div class="text">
          <span>代表履职人次</span>
          <p>674</p>
        </div>
      </div>
    </div>
    <div class="list0" @mouseenter="mouseEnterFn" @mouseleave="mouseLeaveFn">
      <div class="list1">
        <div class="item" v-for="item in dataList">
          <div class="title">
            <div class="msg">
              <div class="lable">
                {{ item.lable }}
              </div>
              {{ item.title }}
            </div>
          </div>
          <div class="time">
            <span>{{ item.a }}</span>
            <span>领衔代表：{{ item.b }}</span>
            <span>{{ item.c }}</span>
          </div>
        </div>
      </div>
      <div class="list2"></div>
    </div>
    <el-dialog title="代表履职" :visible.sync="dialogVisible" width="1500px">
      <div class="dialog_box">
        xxxxxxx
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/template/title.vue'
export default {
  name: 'post',
  data() {
    return {
      currentIndex: 1,
      dialogVisible: true,
      timer: null,
      dataList: [
        { lable: '市场调研1', title: '履职内容履职内容履职内容履职内容履职内容履职内容履职内容履职内容', a: 'xx镇', b: '张春峰', c: '2024-03-15' },
        { lable: '市场调研2', title: '履职内容履职内容履职内容履职内容履职内容履职内容履职内容履职内容', a: 'xx镇', b: '张春峰', c: '2024-03-15' },
        { lable: '市场调研3', title: '履职内容履职内容履职内容履职内容履职内容履职内容履职内容履职内容', a: 'xx镇', b: '张春峰', c: '2024-03-15' },
      ]
    }
  },
  components: {
    Title
  },
  mounted() {
    this.moveInit()
  },
  methods: {
    // tab切换
    tabFn(index) {
      this.currentIndex = index
    },

    // 打开dialog
    dialogFn() {
      console.log(1);
      this.dialogVisible = true
    },

    // 滚动
    moveInit() {
      this.$nextTick(() => {
        this.clearTime()
        this.moveFn()
      })
    },

    moveFn() {
      let box1, box2, box3;
      box1 = document.querySelector(".list0");
      box2 = document.querySelector(".list1");
      box3 = document.querySelector(".list2");
      // console.log(box1,box2,box3);
      if (this.dataList.length >= 1) {
        box3.innerHTML = box2.innerHTML;
      } else {
        box3.innerHTML = '';
      }
      this.timer = setInterval(() => {
        // if (box3.offsetTop - box1.scrollTop <= 0) {
        if (box2.scrollHeight - box1.scrollTop <= 0) {
          // console.log(box1.scrollTop , box2.offsetHeight);
          box1.scrollTop -= box2.offsetHeight;
        }
        else {
          box1.scrollTop++;//demo向上滚动一个像素
        }
      }, 50);
    },

    mouseEnterFn() {
      this.clearTime()
    },
    mouseLeaveFn() {
      this.moveInit()
    },
    clearTime() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  },
}

</script>
<style scoped lang='scss'>
.content {
  margin-top: 20px;
  width: 470px;
  height: 430px;

  .number {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px 0px;

    .number_item {
      display: flex;
      flex-direction: row;
      width: 184px;
      height: 64px;


      img {
        // height: 100%;
        margin-right: 10px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        span {
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: rgba(180, 204, 224, 1);
          text-align: left;
          vertical-align: top;
        }

        p {
          font-size: 26px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 30px;
          color: rgba(255, 97, 97, 1);
          text-align: left;
          vertical-align: top;
        }
      }
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .list0 {
    height: 270px;
    // border: 1px solid red;
    overflow: hidden;
    overflow-y: auto;

    .item {
      width: 470px;
      height: 104px;

      background: url('@/assets/images/left/juxing.svg') no-repeat bottom;
      padding: 5px 22px;
      box-sizing: border-box;

      margin-bottom: 10px;

      .title {
        .lable {
          width: 78px;
          height: 26px;
          // border-radius: 1.2px;
          // border: 1px solid rgb(242, 155, 145);

          // background: linear-gradient(90deg, rgb(118, 64, 49) 0%, rgb(137, 78, 71) 100%);

          background: url('@/assets/images/left/juxing01.svg');

          font-size: 16px;
          font-weight: 400;
          // letter-spacing: 0px;
          line-height: 23px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          // vertical-align: top;
          display: inline-block;
          margin-right: 15px;
        }

        .msg {
          display: inline-block;
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 30px;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;

          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .time {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 23.76px;
        color: rgba(180, 204, 224, 1);
        text-align: center;
        vertical-align: top;
        margin-top: 5px;

        span {
          margin: 0 10px
        }
      }


      // border: 1px solid red;
    }
  }


}
</style>